<template>
  <div class="article">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>文章专栏</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">


      <nuxt-child />
    </el-card>
  </div>
</template>
<script>
    export default {
        data() {
            return {
                input3: '',
                select: ''
            }
        },
    }
</script>
<style>
    .article {
        width: 1200px;
        margin: 20px auto;
    }

    .article .box-card {
        margin-top: 20px;
    }

    .article_title {
        margin-bottom: 20px;
        line-height: 40px;
        height: 40px;
        background-color: #f4f4f4;
    }

    .article_title ul {
        width: 60%;
        display: flex;
    }

    .article_title ul li {
        width: 20%;
        line-height: 40px;
        text-align: center;
    }

    .article_title ul li a {
        font-size: 16px;
        color: skyblue;
        font-weight: bold;
    }

    .aticle_list {
        margin-top: 10px;
        display: flex;
    }

    .list_l {
        flex: 7;
    }

    .list_r {
        flex: 3;
    }

    .detail-list {
        display: flex;
        flex-direction: column;
    }

    .qa-item {
        display: flex;
        position: relative;
        padding: 10px 30px;
        margin-bottom: 5px;
        background-color: #f4f4f4;
        height: 140px;
    }

    .qa-item img {
        height: 100%;
        width: 150px;
    }

    .content_title {
        padding-left: 10px;
    }

    .content_title>a {
        max-width: 675px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: block;
        font-size: 18px;
    }

    .content_title>a:hover {
        color: #be1f4f;
    }

    .content_title p {
        margin-top: 10px;
        font-size: 14px;
    }

    .p1 {
        height: 40px;
        overflow: hidden;
        line-height: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }

    .p1 a {
        color: #999;
    }

    .p1 a:hover {
        color: #999;
    }

    .content_title span {
        padding-left: 10px;
    }
</style>
